<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        ul{
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
        li{
            height:350px;
            width:170px;
            border:1px solid black;
            font-size: 14px;
            list-style: none;
           
        }
        h4{
            margin-bottom: 10px;
        }
        em{
            text-decoration:line-through;
        }
        p{
            margin-bottom: 10px;
        }
        img{
            height:127px;
        }
        span{
            color:red;
        }

    </style>
      
</head>
<body>
    <button id="jiage">根据价格排序</button>
    <button id="xiaoliang">根据销量排序</button>
    <button id="pingjia">根据评价排序</button>


    <ul class="ul1" id="ul1"></ul>

    <script>
       
        var data = [
            {
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 7399.00,
            sale: 4888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        },
    ]


    fn();
        //根据价格排序
    jiage.onclick=function(){
        data.sort(function (a, b) {
            return b.sale - a.sale
        })
        fn();
    }

    xiaoliang.onclick=function(){
        data.sort(function (a, b) {
            return b.evaluate - a.evaluate
        })
        fn();
    }

    pingjia.onclick=function(){
        data.sort(function (a, b) {
            return b.sales - a.sales
        })
        fn();
    }
    function fn(){
        ul1.innerHTML ="";
        for (var i=0;i<data.length;i++){
            ul1.innerHTML += '<li>'
            +'<img src="'+data[i].imgurl+'" alt="">'
            +'<h5>'+data[i].name+'</h5>'
            +'<p>颜色：'+data[i].color+'</p>'
            +'<p>原价:'+'<em>'
                +data[i].price+'</em>'
            +'</p>'
            +'<p>现价:'
                +'<span>'+data[i].sale+'</span>'
            +'</p>'
            +'<p>  销量：'+data[i].evaluate+' </p>'
            +'<p>  评价：'+data[i].sales+ '</p>'
            +'</li> '
        }
    }
    
   </script>
  



</body>
</html>